import * as THREE from 'three';
import { OrbitControls } from "./OrbitControls.js";
import { GLTFLoader } from "./GLTFLoader.js";
import { DRACOLoader } from "./DRACOLoader.js";
import { RoomEnvironment } from "./RoomEnvironment.js";


const container = document.querySelector( '.canvas' );

const renderer = new THREE.WebGLRenderer( { antialias: true,alpha:true } );
let w = $(window).width()
let h = $(window).height()
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( w, h );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputColorSpace = THREE.SRGBColorSpace;
container.appendChild( renderer.domElement );

const camera = new THREE.PerspectiveCamera( 50, w / h, .1, 2000 );
camera.position.set( -0.647, 0.272, -0.342 );
camera.rotation.set(-147.70/180*Math.PI,-58.42/180*Math.PI,-151.69/180*Math.PI)

const environment = new RoomEnvironment();
const pmremGenerator = new THREE.PMREMGenerator( renderer );
const scene = new THREE.Scene();
scene.background = null;
scene.environment = pmremGenerator.fromScene( environment ).texture;
environment.dispose();

const loader = new GLTFLoader();

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '/static/js/draco/' );
loader.setDRACOLoader( dracoLoader );
// Load a glTF resource
loader.loadAsync('https://www.sansg.com/3.glb').then(gltf=>{
    gltf.scene.traverse(model=>{
        if (model.isMesh){
            model.material.normalMap = null
        }
    })
    scene.add( gltf.scene );
    gltf.scene.name='model1'
})
loader.loadAsync('https://www.sansg.com/2.glb').then(gltf=>{
    gltf.scene.traverse(model=>{
        if (model.isMesh){
            model.material.normalMap = null
        }
    })
    scene.add( gltf.scene );
    gltf.scene.name='model2'
    scene.traverse(model=>{
        if(model.isGroup){
            model.visible = false
        }

    })
    scene.getObjectByName('model1').visible = true
})




const controls = new OrbitControls( camera, renderer.domElement );
controls.enableZoom = false
controls.autoRotate = true
controls.update();

window.addEventListener( 'resize', onWindowResize );

function onWindowResize() {
    camera.aspect = w / h;
    camera.updateProjectionMatrix();
    renderer.setSize( w, h );
}

function animate() {
    requestAnimationFrame( animate );
    controls.update();
    renderer.render( scene, camera );
}
animate();
let index = 1
let total = 2
$('.sec2 .wrap .pro_swiper .btns .cir:nth-child(2)').click(function () {
    if (index <= (total-1)) {
        scene.traverse(model=>{
            if(model.isGroup){
                model.visible = false
            }
        })
        index+=1
        let current = 'model' + index
        scene.getObjectByName(current).visible = true
    }
})
$('.sec2 .wrap .pro_swiper .btns .cir:nth-child(1)').click(function () {
    if (index > 1) {
        scene.traverse(model=>{
            if(model.isGroup){
                model.visible = false
            }
        })
        index-=1
        console.log(index)
        let current = 'model' + index
        scene.getObjectByName(current).visible = true
    }
})
